<template>
  <div class="rule-view">
    <div class="details-head">
      <el-breadcrumb slot="breadcrumb">
        <el-breadcrumb-item to="/rule">数据规则</el-breadcrumb-item>
        <el-breadcrumb-item>{{ accessTitle }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card class="detail-card">
      <el-form
        ref="record"
        label-position="top"
        :model="record"
        :disabled="disabled"
        :rules="disabled ? {} : rules">
        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="规则名称" prop="name">
              <el-input v-model="record.name"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="包含服务器" prop="server">
              <le-select
                v-model="record.server"
                :field="{ url: '/select/server', key: 'server', multiple: true }"
                :record="record"
                :disabled="disabled">
              </le-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="比较字段" prop="keyList">
              <el-cascader
                v-model="record.keyList"
                expand-trigger="hover"
                :options="ruleDict"
                @change="handleChange">
              </el-cascader>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="比较符号" prop="run">
              <el-input v-model="record.run" placeholder=">,<,>=,<=,includes,not_includes等比较符"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="比较值" prop="value">
              <el-input v-model="record.value"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负反馈管理指令" prop="feedback">
              <el-input v-model="record.feedback"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="响应动作" prop="action">
              <le-select
                v-model="record.action"
                :field="{ url: '/select/action', key: 'action' }"
                :record="record"
                :disabled="disabled">
              </le-select>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </el-card>

    <div v-if="!disabled" class="oper-area">
      <el-button type="success" @click="save">保存</el-button>
    </div>
  </div>
</template>


<script>
  import details from '~/mixins/details'

  export default {
    name: 'product-rule-view',
    mixins: [details],
    components: {},
    data() {
      const validateRun = (rule, value, cb) => {
        if (!'>,<,>=,<=,includes,not_includes'.split(',').includes(value)) {
          return cb(new Error('请输入合法的比较符'))
        }
        cb()
      }
      return {
        url: '/rule',
        record: {
          keyList: [],
          rule: [],
        },
        ruleDict: [{
          'label': 'CPU',
          'value': 'cpu',
          'children': [{ 'label': '核心数', 'value': 'cores' }, { 'label': '内核速度', 'value': 'speed' }, {
            'label': '运行状态',
            'value': 'times',
            'children': [{ 'label': '空闲模式下的毫秒时间数', 'value': 'idle' }, {
              'label': '中断请求模式下的毫秒时间数',
              'value': 'irq',
            }, { 'label': '良好模式下的毫秒时间数', 'value': 'nice' }, { 'label': '系统模式下的毫秒时间数', 'value': 'sys' }],
          }],
        }, {
          'label': 'Nginx 服务器',
          'value': 'nginx',
          'children': [{ 'label': 'IP 地址', 'value': 'ip' }, { 'label': 'HTTP 状态码', 'value': 'status' }, {
            'label': 'URL 路径',
            'value': 'path',
          }, { 'label': '请求头', 'value': 'agent' }],
        }, {
          'label': '网络',
          'value': 'lan',
          'children': [{ 'label': '网络流量', 'value': 'speed' }, { label: '丢包率', 'value': 'packagelost' }],
        }, {
          'label': '进程信息',
          'value': 'process',
          'children': [{ 'label': '内存占用（MB）', 'value': 'memory' }, { 'label': 'CPU占用（%）', 'value': 'cpu' }, {
            'label': '进程名称',
            'value': 'name',
          }],
        }, {
          'value': 'disk',
          'label': '磁盘',
          'children': [{ 'label': '剩余空间', 'value': 'free' }, { 'label': '读写占用', 'value': 'avg' }],
        }, {
          'label': '内存信息',
          'value': 'memory',
          'children': [{ 'label': '剩余内存(MB)', 'value': 'free' }, { 'label': 'SWAP 空间(MB)', 'value': 'swap' }],
        }],
        rules: {
          'name': [
            {
              'required': true,
              'message': '请填写规则名称',
            },
          ],
          'user': [
            {
              'required': true,
              'message': '请填写创建用户',
            },
          ],
          'server': [
            {
              'required': true,
              'message': '请选择包含服务器',
            },
          ],
          'run': [
            {
              'required': true,
              'message': '请填写比较信息',
            },
            {
              validator: validateRun,
            },
          ],
          value: [
            {
              'required': true,
              'message': '请填写比较值',
            },
          ],
          'keyList': [
            {
              'required': true,
              'message': '请选择比较对象',
            },
          ],
          'action': [
            {
              'required': true,
              'message': '请选择关联动作',
            },
          ],
        },
      }
    },
    methods: {
      afterLoadData(record) {
        const { rule } = record
        this.$set(record, 'keyList', rule[0].key.split('.'))
        this.$set(record, 'run', rule[0].option)
        this.$set(record, 'value', rule[0].value)
      },
      beforeSave() {
        const rule = [{
          key: this.record.keyList.join('.'),
          option: this.record.run,
          value: this.record.value,
        }]
        this.record.rule = rule
      },
      handleChange(info) {
        console.log(info)
        console.log(this.record.keyList)
      },
    },
  }
</script>


<style lang="scss">
  .rule-view {
    .el-cascader {
      width: 100%;
    }
  }
</style>
